<template>
	<div class="centeraction">
		<div class="header">
			<p class="head_left">共 <span>{{total}}</span> 位客户</p>
			<div class="head_right">
				<picker @change="select_time" :value="dateIndex" :range="columns">
					<div class="visit_time">
						<span class="visit_icon" v-if="!dateIndex">访问时间</span>
						<span class="visit_icon" v-else>{{columns[dateIndex]}}</span>
						<img :src="`${constant.imgUrl}design/down.png`" alt="">
					</div>
				</picker>
				<div class="visit_time" @click="filterShowBtn">
					<span>筛选</span>
					<i class="iconfont iconshaixuan"></i>
				</div>
			</div>
		</div>
		<div class="list_wrap" :class="{'navFixedInMar' : navFixed}">
			<ul>
				<li class="list_body" v-for="(item,index) in list" :key="index" @click="skiptodetail(item.create_user_id)">
					<div class="list_body_top">
						<div class="list_top_left">
							<div class="list_img">
								<img v-if="item.user_id != '0'" :src="item.user_picture" alt>
								<img v-else :src="`${constant.imgUrl}design/tourist_icon.png`" alt>
							</div>
							<div class="list_info">
								<div class="list_info_top">
									<div class="list_name ellipsis_line_com">{{ item.nick_name }}</div>
									<img v-if="item.mobile_phone != ''" class="list_icon"
										 :src="`${constant.imgUrl}common/telep.png`" alt>
									<img v-if="item.wechat_number != ''" class="list_icon"
										 :src="`${constant.imgUrl}common/wchat.png`" alt>
									<img v-if="!item.user_id != '0'" class="list_icon"
										 :src="`${constant.imgUrl}common/tourist.png`" alt>
								</div>
								<div class="text_sub_com">{{item.stats_type_name }}</div>
							</div>
						</div>
						<div class="list_top_right">
							<div class="text_main_color">25%</div>
							<div>意向度</div>
						</div>
					</div>

					<div class="list_body_bottom">
						<div v-if="item.user_name && item.user_name != '游客'">{{item.mobile_phone}}</div>
						<div class="list_statistics">
							<span v-if="item.userTraceCount.pageView">访问次数 {{ item.userTraceCount.pageView }}</span>
							<span v-if="item.userTraceCount.prebookNum">客户预约 {{ item.userTraceCount.prebookNum }}</span>
							<span v-if="item.userTraceCount.fissionPageView">分享 {{ item.userTraceCount.fissionPageView }}</span>
						</div>
						<div class="text_sub_com">最后访问：{{ item.view_time_last }}
							<!--<span class="addfollow" @click="addfollow(item.mobile_phone)" @click.stop  v-if="item.userTraceCount.prebookNum !== 0">添加跟进记录   <i class="iconfont iconjiantou"></i></span>-->
						</div>
						<!--<div class="text_sub_com" >访问地区：厦门</div>-->
					</div>
				</li>
			</ul>
			<view v-if="list.length==total&&finished" class="noMore">没有更多了</view>
		</div>

		<!-- 右侧弹出层 -->
		<uni-drawer :visible="filterShow" mode="right" class="filter_mask_wrap" @close="filterShow=false">
			<div class="boxContent">
				<div class="filter_mask_list" v-show="item.showStatus" v-for="(item, pIndex) in filterMaskData" :key="pIndex">
					<div class="filter_mask_title">{{ item.title }}</div>
					<div class="filter_mask_body">
						<div :class="{'active' : items.status}" v-for="(items, index) in item.list" :key="index" @click="filterMaskBtn(item, items, pIndex, index)">
							<span>{{ items.name }}</span>
							<i v-if="item.type == 2 && items.status" class="iconfont iconjiaobiao"></i>
						</div>
					</div>
				</div>
				<div class="filter_mask_btn">
					<div @click="resetFilterMask">重置</div>
					<div class="confirm_btn" @click="filterHideBtn">确定</div>
				</div>
			</div>
		</uni-drawer>
	</div>
</template>

<script>
import { getFormatDate } from '@/utils/common'
import { getSummaryList } from '@/api/behaviorTrack'
import uniDrawer from '@/components/uni_drawer.vue'
export default {
	name: 'CenterAction',
	components: { uniDrawer },
	data() {
		return {
			constant: this.$constant,
			columns: ['全部', '今天', '昨天', '近一周', '近一月'],
			dateIndex: null,

			viewedActive: 0,
			viewedType: '',
			currentDate: new Date(),
			value: '访问时间',
			choose_time: false,
			//   新增
			finterActive: 0,
			filterType: '',

			list_data: {},
			list: [],
			loading: false,
			isLoading: false,
			finished: false,
			currentPage: 1,
			// 筛选
			filterObj: {
				stimeType: 'today',
				userGroups: null,
				userGroupsOne: null,
				UserSource: null,
				roleType: [],
				hasWechat: null,
				hasMobile: null,
				source: []
			},
			// 筛选弹窗
			filterShow: false,
			// 筛选弹窗群体选择
			filterUserGroups: null,
			filterSourceGroups: null,
			filterMaskData: [
				{
					title: '联系方式',
					showStatus: true,
					value: 'hasContact',
					type: 2,
					list: [
						{
							name: '有微信号',
							value: 1,
							status: false
						},
						{
							name: '手机号码',
							value: 1,
							status: false
						}
					]
				},
				{
					title: '群体',
					showStatus: true,
					value: 'userGroups',
					list: [
						{
							name: '准业主',
							value: 1,
							status: false
						},
						{
							name: '从业者',
							value: 2,
							status: false
						}
					]
				},
				{
					title: '准业主角色',
					showStatus: false,
					value: 'userGroupsOne',
					list: [
						{
							name: '游客',
							value: 1,
							status: false
						},
						{
							name: '注册用户',
							value: 2,
							status: false
						}
					]
				},
				{
					title: '从业者角色',
					showStatus: false,
					value: 'roleType',
					type: 2,
					list: [
						{
							name: '装修公司',
							value: 1,
							status: false
						},
						{
							name: '经销商',
							value: 2,
							status: false
						},
						{
							name: '设计师',
							value: 3,
							status: false
						},
						{
							name: '店长/导购',
							value: 4,
							status: false
						},
						{
							name: '安装工',
							value: 5,
							status: false
						},
						{
							name: '家居顾问',
							value: 6,
							status: false
						}
					]
				}/*,
                {
                    title: '客户来源',
                    showStatus: true,
                    value: 'source',
                    type: 2,
                    list: [
                        {
                            name: '全部',
                            value: 0,
                            status: false
                        },
                        {
                            name: '文章',
                            value: 1,
                            status: false
                        },
                        {
                            name: '海报',
                            value: 2,
                            status: false
                        },
                        {
                            name: '名片',
                            value: 3,
                            status: false
                        },
                        {
                            name: '案例',
                            value: 4,
                            status: false
                        },
                        {
                            name: '其他',
                            value: 5,
                            status: false
                        }
                    ]
                }*/
			],
			navOffsetTop: 0,
			navFixed: false,
			total: 0
		}
	},
	onLoad(option) {
		this.getList()
	},
	// 下拉刷新
	onPullDownRefresh() {
		let that = this
		this.getList()
	},
	// 加载更多
	onReachBottom() {
		if (this.loading) {
			return
		}
		if (this.list.length < this.total) {
			this.getList()
		}
	},
	methods: {
	    // 获取列表
		getList() {
			let params = {
				limit: 10,
				page: this.currentPage
			}
			/* if (this.filterType) {
						params.stats_type = this.filterType
					}

					if (this.start_time && this.start_time_str !== '开始时间') {
						params.stime = getDataTimestamp(this.start_time_str) / 1000
					}
					if (this.end_time && this.end_time_str !== '结束时间') {
						params.etime = getDataTimestamp(this.end_time_str) / 1000
					}*/
			if (this.viewedType) {
				params.stimeType = this.viewedType
			}

			if (this.filterObj.userGroups) {
				params.userGroups = this.filterObj.userGroups
			}
			if (this.filterObj.userGroupsOne && this.filterUserGroups == 1) {
				params.userGroupsOne = this.filterObj.userGroupsOne
			}
			if (this.filterObj.roleType.length > 0 && this.filterUserGroups == 2) {
				let str = ''
				let arr = JSON.parse(JSON.stringify(this.filterObj.roleType))
				for (let i in arr) {
					str += arr[i] + ','
				}
				str = str.substr(0, str.length - 1)
				params.roleType = str
			}
			if (this.filterObj.hasWechat) {
				params.hasWechat = this.filterObj.hasWechat
			}
			if (this.filterObj.hasMobile) {
				params.hasMobile = this.filterObj.hasMobile
			}
			if (this.filterObj.source.length > 0 && this.filterSourceGroups == 'source') {
				let str = ''
				let arr = JSON.parse(JSON.stringify(this.filterObj.source))
				for (let i in arr) {
					str += arr[i] + ','
				}
				str = str.substr(0, str.length - 1)
				params.source = str
			}
			getSummaryList(params).then(res => {
				uni.stopPullDownRefresh()
				if (res.status === 'success') {
					// 筛选配置项
					// this.filterMaskData = res.data.optionsData
					let data = res.data
					this.total = data.list.total
					data.countData.same_period_count_percent = data.countData.same_period_count_percent == 'nodata' ? 0 : data.countData.same_period_count_percent
					data.countData.increase_class = data.countData.same_period_count_percent > 0 ? 'viewed_data_up' : 'viewed_data_down'

					let list = data.list
					if (list.total > 0) {
						this.list_data = list
						for (let i in list.data) {
							list.data[i].view_time_last = getFormatDate(list.data[i].view_time_last, 'yyyy-MM-dd hh:mm:ss')
						}
						this.list = this.list.concat(list.data)
						this.currentPage++
					}
					if (list.last_page === list.current_page) {
						this.finished = true
					}

					this.loading = false

					this.data = data.countData
					/* this.filter_data[0].value = data.countData.all_count
							 this.filter_data[1].value = data.countData.wechat_chat_count
							 this.filter_data[2].value = data.countData.shop_qrcode_count
							 this.filter_data[3].value = data.countData.poster_count
							 this.filter_data[4].value = data.countData.wechat_moments_count*/
				}
			})
		},
		// 访问时间
		select_time(e) {
			this.dateIndex = e.target.value
			let index = e.target.value
			if (index == 0) {
				this.viewedType = ''
			} else if (index == 1) {
				this.viewedType = 'today'
			} else if (index == 2) {
				this.viewedType = 'yesterday'
			} else if (index == 3) {
				this.viewedType = 'recent_week'
			} else if (index == 4) {
				this.viewedType = 'recent_month'
			}
			this.filterObj.stimeType = this.viewedType
			this.choose_time = false
			this.currentPage = 1
			this.list = []
			this.getList()
		},
		// 打开弹窗
		filterShowBtn() {
			this.filterShow = true
		},
		filterHideBtn() {
			this.filterShow = false
		},
		// 筛选按钮
		filterMaskBtn(item, items, pIndex, index) {
			// 筛选数组状态
			// if (item.type === 2) {
			// 群体
			if (item.value === 'userGroups') {
				this.filterObj.userGroups = items.status ? null : items.value
			}
			// 准业主类型
			if (item.value === 'userGroupsOne') {
				this.filterObj.userGroupsOne = items.status ? null : items.value
			}
			// 从业主类型
			if (item.value === 'roleType') {
				if (items.status) {
					this.filterObj.roleType = this.filterObj.roleType.filter(filterItem => filterItem != items.value)
				} else {
					this.filterObj.roleType.push(items.value)
				}
			}
			// 是否有联系方式
			if (item.value === 'hasContact') {
				if (items.name === '有微信号') {
					this.filterObj.hasWechat = items.status ? null : 1
				}
				if (items.name === '手机号码') {
					this.filterObj.hasMobile = items.status ? null : 1
				}
			}
			// 来源
			if (item.value === 'source') {
				this.filterObj.UserSource = item.value
				this.filterSourceGroups = item.value
				if (items.status) {
					this.filterObj.source = this.filterObj.source.filter(filterItem => filterItem != items.value)
				} else {
					this.filterObj.source.push(items.value)
				}
				// this.filterObj.source.push(items.value)
				// this.filterObj.source = items.status ? null : items.value
			}
			// }
			// 如果筛选的是群体时（切换隐藏项）
			if (item.title === '群体') {
				this.filterUserGroups = items.value
				this.filterMaskData[2].showStatus = false
				this.filterMaskData[3].showStatus = false
				this.filterMaskData[items.value + 1].showStatus = true
			}
			// 改变当前label的状态
			if (item.type !== 2) {
				for (let i in item.list) {
					item.list[i].status = false
				}
			}
			item.list[index].status = !items.status
			console.log(this.filterObj)
			this.clearListData()
		},
		// 清空过滤器
		resetFilterMask() {
			for (let i in this.filterMaskData) {
				for (let j in this.filterMaskData[i].list) {
					this.filterMaskData[i].list[j].status = false
				}
			}

			this.filterObj.userGroups = null
			this.filterObj.userGroupsOne = null
			this.filterObj.roleType = []
			this.filterObj.hasWechat = null
			this.filterObj.hasMobile = null
			this.clearListData()
		},
		// 清空列表状态
		clearListData() {
			this.list = []
			this.currentPage = 1
			this.finished = false
			this.getList()
		},
		skiptodetail(id) {
			uni.navigateTo({
				url: `/pages/order/centerClientDatail?create_user_id=${id}`
			})
		},
		// 到跟进记录
		addfollow(mobile_phone) {
			var isEmpty = ''
			if (mobile_phone == '') {
				isEmpty = 1
			} else {
				isEmpty = ''
			}
			this.$router.push({
				name: 'Followrecord',
				query: {
					owner_user_id: this.$route.query.owner_user_id,
					mobile: mobile_phone,
					prebookDetail: '',
					prebook_id: 20,
					isEmpty: isEmpty
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.centeraction {
		min-height: 100vh;
		background-color: #f5f5f5;

		.header {
			top: 0;
			left: 0;
			z-index: 99;
			font-size: 30px;
			position: fixed;
			width: 100%;
			height: 90px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;

			.head_left {
				flex: 1;
				padding-left: 20px;

				span {
					color: #FF6900;
				}
			}

			.head_right {
				padding-right: 40px;
				display: flex;
				justify-content: end;
				.visit_time {
					.iconshaixuan{
						font-size: 28px;
					}
					flex: 1;
					height: 50px;
					line-height: 50px;
					margin-top: 5px;
					padding-left: 10px;

					span {
						float: left;
						margin-right: 5px;
					}

					.visit_icon {
						padding-right: 10px;
					}

					img {
						width: 20px;
						height: 10px;
						margin-top: 20px;
						float: left;
					}
				}

				.visit_time:first-child {
					margin-right: 20px;
					padding-right: 20px;
					border-right: 1px solid #DDDDDD;
				}
			}
		}

		.filter_btn_wrap,
		.filter_btn_wrap_fixed {
			display: flex;
			width: calc(100% - 60px);
			align-items: center;
			justify-content: space-between;
			padding: 0 30px;
			height: 100px;
			background-color: #fff;
			color: #666;
			font-size: 30px;
			border-top: 1px solid #ddd; /*no*/
		}

		.filter_btn_wrap_fixed {
			display: none;
		}

		.list_wrap {
			padding: 100px 20px;
			.list_body {
				padding: 25px;
				background-color: #fff;
				border-radius: 20px;
				margin-top: 25px;

				.list_body_top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20px;

					.list_top_left {
						display: flex;
						align-items: center;

						.list_img {
							width: 100px;
							height: 100px;
							margin-right: 20px;

							img {
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}

						.list_info_top {
							display: flex;
							align-items: center;
							font-size: 34px;
							margin-bottom: 4px;

							.list_icon {
								width: 30px;
								height: 30px;
								border-radius: 10px;
								margin-left: 10px;
							}

							.list_name {
								max-width: 360px;
							}
						}
					}

					.text_main_color {
						font-size: 30px;
					}
				}

				.list_body_bottom {
					position: relative;
					padding-top: 10px;
					border-top: 2px solid #ddd;

					& > div {
						margin: 10px 0;
					}

					.list_statistics {
						& > span {
							margin-right: 16px;
						}
					}

					.addfollow {
						float: right;
						color: #FF6900;
					}
				}

				.list_body_bottom:after {
					content: '';
					display: block;
					position: absolute;
					top: 70px;
					right: 40px;
					width: 15px;
					height: 28px;
					/* background: url(../../../assets/image/center/icon_right_arrow_large.png) center center / 100% 100% no-repeat;*/
				}
			}
		}

		.filter_mask_wrap {

			.boxContent{
				padding: 20px;
			}
			.filter_mask_list {
				padding: 0 20px 0 30px;

				.filter_mask_title {
					color: #666;
					margin-bottom: 26px;
				}

				.filter_mask_body {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					margin-bottom: 50px;

					& > div {
						position: relative;
						width: calc(33.33% - 10px);
						height: 80px;
						line-height: 80px;
						text-align: center;
						background-color: #f4f4f4;
						border-radius: 10px;
						margin-right: 10px;
						margin-bottom: 10px;
					}

					& > div.active {
						color: #3a1b04;
						background-color: #ffd11a;

						i {
							position: absolute;
							right: 2px;
							bottom: 22px;
							width: 44px;
							height: 38px;
							color: #fff;
						}
					}
				}
			}

			.filter_mask_btn {
				position: absolute;
				left: 0;
				bottom: 30px;
				width: calc(100% - 62px);
				display: flex;
				align-items: center;
				margin: 0 30px;
				border: 1px solid #ddd; /*no*/
				border-radius: 50px;
				font-size: 36px;
				text-align: center;

				& > div {
					width: 50%;
					height: 90px;
					line-height: 90px;
				}

				.confirm_btn {
					color: #3a1b04;
					background-color: #ffd11a;
					border-top-right-radius: 50px;
					border-bottom-right-radius: 50px;
				}
			}
		}

		.navFixedInMar {
			margin-top: 100px;
		}

		.navFixedIn {
			display: flex !important;
			position: fixed;
			top: 0;
			left: 0;
			-webkit-animation-name: fadeIn; /*动画名称*/
			-webkit-animation-duration: 0.4s; /*动画持续时间*/
			-webkit-animation-iteration-count: 1; /*动画次数*/
			-webkit-animation-fill-mode: forwards;
			z-index: 1;
			background-color: #fff;
			box-shadow: 0 10px 10px #ededed;
			border-top: none;
		}

		@keyframes fadeIn {
			0% {
				opacity: 0;
			}
			50% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@-webkit-keyframes fadeIn {
			0% {
				opacity: 0;
			}
			50% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
	}
</style>
